import React, { useState, useRef, forwardRef, useEffect } from 'react';
import * as echarts from 'echarts';
import './index.scss';

export interface ChartSelectorTab {
  id: string;
  text: string;
  isActive?: boolean;
}

export interface ChartSelectorProps {
  width?: string | number;
  height?: string | number;
  iconBackground?: string;
  tabs?: ChartSelectorTab[];
  activeTabId?: string;
  tabBackgroundColor?: string;
  tabBorderColor?: string;
  tabTextColor?: string;
  tabFontSize?: number;
  tabFontFamily?: string;
  tabFontWeight?: string | number;
  tabLineHeight?: string;
  chartData?: any; // 可以根据实际图表数据类型调整
  showChart?: boolean;
  theme?: 'light' | 'dark';
  style?: React.CSSProperties;
  className?: string;
  onTabChange?: (tab: ChartSelectorTab) => void;
  onClick?: () => void;
  __designMode?: string;
  componentId?: string;
  _componentName?: string;
  forwardRef?: any;
}

const ChartSelector = forwardRef<HTMLDivElement, ChartSelectorProps>((props, ref) => {
  const {
    width = 410,
    height = 380,
    iconBackground = 'http://localhost:8085/static/images/chuxingfuwu/bj14bf9.png',
    tabs = [
      { id: 'tab1', text: '1号网约车', isActive: true },
      { id: 'tab2', text: '6号网约车', isActive: false },
      { id: 'tab3', text: '网约车人数', isActive: false }
    ],
    activeTabId = 'tab2',
    tabBackgroundColor = 'rgba(5,18,34,0.2)',
    tabBorderColor = '#3A4E74',
    tabTextColor = 'rgba(255,255,255,0.9)',
    tabFontSize = 14,
    tabFontFamily = 'SourceHanSansSC',
    tabFontWeight = 400,
    tabLineHeight = '20px',
    chartData,
    showChart = true,
    theme = 'dark',
    style = {},
    className = '',
    onTabChange,
    onClick,
    __designMode,
    componentId,
    _componentName,
    forwardRef: forwardRefProp,
    ...otherProps
  } = props;

  const componentStyle: React.CSSProperties = {
    width: typeof width === 'number' ? `${width}px` : width,
    height: typeof height === 'number' ? `${height}px` : height,
    ...style
  };

  const tabStyle: React.CSSProperties = {
    backgroundColor: tabBackgroundColor,
    borderColor: tabBorderColor,
    color: tabTextColor,
    fontSize: `${tabFontSize}px`,
    fontFamily: tabFontFamily,
    fontWeight: tabFontWeight,
    lineHeight: tabLineHeight
  };
  const chartRef = useRef<HTMLDivElement>(null);
  const [activeTabIndex, setActiveTabIndex] = useState(0);
  const myChartData = {
    vehicleFlow: [120, 132, 101, 134, 90, 230],
    passengerFlow: [220, 182, 191, 234, 290, 330],
  }
  useEffect(() => {
    if (chartRef.current && showChart && myChartData) {
      const chartInstance = echarts.init(chartRef.current);
      const option = {
        grid: {
          left: '10%',
          right: '6%',
          top: '15%',
          bottom: '12%',
        },
        legend: {
          data: ['车辆时点客流', '来京客流时间'],
          top: '0', // 顶部位置
          right: '6%', // 右侧位置
          icon: 'roundRect',
          itemHeight: 2,
          itemWidth: 16,
          textStyle: {
            fontSize: 12,
            color: 'rgba(255, 255, 255, 0.8)'
          },
        },
        tooltip: {
          trigger: 'axis',
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          axisTick: {
            show: false
          },
          axisLine: {
            lineStyle: {
              color: 'rgba(255,255,255,0.2)',
            },
          },
          nameTextStyle: {
            fontSize: 10,
          },
          axisLabel: {
            interval: 1
          },
          data: ['昨日早间', '昨日晚间', '昨日夜间', '今日早间', '今日晚间', '今日夜间'],

        },
        yAxis: {
          type: 'value',
          splitNumber: 4,
          splitLine: {
            lineStyle: {
              color: 'rgba(255,255,255,0.2)',
            },
          }
        },
        series: [
          {
            name: '车辆时点客流',
            type: 'line',
            data: myChartData.vehicleFlow,
            lineStyle: { color: '#00E5CC' },
            symbol: 'none',
            smooth: true,
            areaStyle: {
              // 渐变色设置
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  { offset: 0, color: 'rgba(0, 229, 204, 0.5)' }, // 渐变开始颜色
                  { offset: 1, color: 'rgba(0, 229, 204, 0.1)' }, // 渐变结束颜色
                ],
              },
            },
          },
          {
            name: '来京客流时间',
            type: 'line',
            data: myChartData.passengerFlow,
            lineStyle: { color: '#1E90FF' },
            symbol: 'none',
            smooth: true,
            areaStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  { offset: 0, color: 'rgba(30, 144, 255, 0.5)' }, // 渐变开始颜色
                  { offset: 1, color: 'rgba(30, 144, 255, 0.1)' }, // 渐变结束颜色
                ],
              },
            },
          },
        ],
      };
      chartInstance.setOption(option);
      window.addEventListener('resize', () => chartInstance.resize());
      return () => {
        chartInstance.dispose();
      };
    }
  }, [showChart, myChartData]);
  const handleTabClick = (tab: ChartSelectorTab, index: number) => {
    setActiveTabIndex(index)
    if (onTabChange) {
      onTabChange(tab);
    }
  };

  const chartSelectorClassName = ['chart-selector', theme, className].filter(Boolean).join(' ');

  return (
    <div
      ref={ref}
      className={chartSelectorClassName}
      style={componentStyle}
      onClick={onClick}
      data-component-id={componentId}
      data-component-name={_componentName}
      data-design-mode={__designMode}
      {...otherProps}
    >
      {/* 选项卡区域 */}
      <div className="tab-selector">
        {tabs.map((tab, index) => (
          <div
            key={tab.id}
            className={`tab-item ${activeTabIndex === index ? 'isActive' : 'unActive'}`}
            style={tabStyle}
            onClick={() => handleTabClick(tab, index)}
          >
            {tab.text}
          </div>
        ))}
      </div>

      {/* 图表区域 */}
      {showChart && (
        <div className="chart-area">
          <div className="chart-container" ref={chartRef} style={{ width: '100%', height: '100%' }}>
          </div>
        </div>
      )}
    </div>
  );
});

ChartSelector.displayName = 'ChartSelector';

export default ChartSelector;
